<template>
  <div class="theMoon">
    <div
      class="time-list"
      v-for="(item, index) in theMoon"
      :key="index"
      @click="getMoon(index)"
    >
      <div class="items" :class="index == moon ? 'item' : 'item2'">
        {{ item.moon }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "theMoon",
  data() {
    return {
      moon: 0,
      theMoon: [
        {
          moon: "近3个月",
        },
        {
          moon: "近半年",
        },
        {
          moon: "近1年",
        },
      ],
    };
  },
  created() {},
  computed: {},
  components: {},
  mounted() {},
  methods: {
    getMoon(inx) {
      this.moon = inx;
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
.theMoon {
  display: flex;
  align-content: center;
  justify-content: flex-end;
  margin: 16px 0;
  .time-list {
    margin-right: 8px;
    .items {
      width: 63px;
      height: 21px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      line-height: 21px;
      text-align: center;
      cursor: pointer;
    }
    .item {
      background: linear-gradient(
        180deg,
        rgba(21, 86, 162, 0) 0%,
        rgba(21, 86, 162, 0.95) 100%
      );
      border: 1px solid rgba(25, 119, 229, 0.8);
      color: #d9f0ff;
      text-shadow: 0px 0px 10px #0091ff, 0px 0px 4px #0091ff;
    }
    .item2 {
      background: linear-gradient(
        180deg,
        rgba(21, 86, 162, 0) 0%,
        rgba(21, 86, 162, 0.3) 100%
      );
      border: 1px solid rgba(17, 54, 95, 0.8);
      color: #738a99;
    }
  }
}
</style>
